<template>
	<div :id="id"></div>
</template>

<script>
	import E from 'wangeditor'
	export default {
		props: {
			value: '',
			id: {
			    type: String,
			    default(){
			        return "websiteEditorElem"  // 1为教师添加，2为机构添加
			    }
			},
			disabled:{
				type:Boolean,
				default:false
			},
		},
		data() {
			return {
				editor: ''
			};
		},
		watch: {
			// 监听父组件v-model值动态改变时，同步更新
			disabled(newValue, oldValue) {
				if(newValue){
					this.editor.$textElem.attr('contenteditable', false)
				}else{
					this.editor.$textElem.attr('contenteditable', true)
				}
			},
		},
		created() {
			//this.editor.txt.html(this.value); 
		},
		mounted() {
			// wangeditor(https://blog.csdn.net/qq_43219422/article/details/90171207)
			this.editor = new E('#'+this.id)
			
			// 菜单配置
			// this.editor.customConfig.menus = [
			// 	'head', // 标题
			// 	'bold', // 粗体
			// 	'fontSize', // 字号
			// 	'fontName', // 字体
			// 	'italic', // 斜体
			// 	'underline', // 下划线
			// 	'strikeThrough', // 删除线
			// 	'foreColor', // 文字颜色
			// 	//'backColor',  // 背景颜色
			// 	//'link',  // 插入链接
			// 	'list', // 列表
			// 	'justify', // 对齐方式
			// 	'quote', // 引用
			// 	//'emoticon',  // 表情
			// 	//'image',  // 插入图片
			// 	'table', // 表格
			// 	//'video',  // 插入视频
			// 	//'code',  // 插入代码
			// 	//'undo',  // 撤销
			// 	//'redo'  // 重复
			// ];
			// 上传图片，base64形式
			//this.editor.customConfig.uploadImgShowBase64 = true
			
			// 上传图片到服务器
			//this.editor.customConfig.uploadImgServer = `${process.env.VUE_APP_API_URL}/admin/editor/upload/${this.userInfo._id}`
			//this.editor.customConfig.uploadFileName = 'files'
			
			// 隐藏网络图片
			this.editor.customConfig.showLinkImg = false
			
			
			//聚焦时候函数
			this.editor.customConfig.onfocus = function() {
				//console.log("onfocus")
			};
			//失焦时候函数
			this.editor.customConfig.onblur = function() {
				//console.log("onblur")
			};
			//change事件，当富文本编辑器内容发生变化时便会触发此函数
			this.editor.customConfig.onchange = text => {
				//console.log(text)
				this.$emit('input',text)
			};
			this.editor.create(); //以上配置完成之后调用其create()方法进行创建
			this.editor.txt.html(this.value); //创建完成之后的默认内容
			if(this.disabled){
				this.editor.$textElem.attr('contenteditable', false)
			}

		},
		methods: {
			initEditorValue(value){
				this.editor.txt.html(value || this.value); 
			}
		}
	}
</script>

<style lang="scss">
	#websiteEditorElem {
		background: #ffffff;
		width: 100%;
	}
</style>
